<template>
  <ElRow class="page6" :gutter="20" style="margin-left: 0;margin-right: 0;">
    <ElCol :span="7">
      <div class="grid-content">
        <span class='title'><span class="title-gradient">当前设备信息</span></span>
        <span class="angle1"></span>
        <span class="angle2"></span>
        <span class="angle3"></span>
        <span class="angle4"></span>
        <div class="item-container">
          <currentDevice />
        </div>
      </div>
      <div class="grid-content">
        <span class='title'><span class="title-gradient">日运行时间</span></span>
        <span class="angle1"></span>
        <span class="angle2"></span>
        <span class="angle3"></span>
        <span class="angle4"></span>
        <div class="item-container">
          <EveryDayRunTime ref="EveryDayRunTimeRef"/>
        </div>
      </div>

      <div class="grid-content">
        <span class='title'><span class="title-gradient">月运行时间</span></span>
        <span class="angle1"></span>
        <span class="angle2"></span>
        <span class="angle3"></span>
        <span class="angle4"></span>
        <div class="item-container">
          <EveryMonthRunTime ref="EveryMonthRunTimeRef"/>
        </div>
      </div>
    </ElCol>
    <ElCol :span="10" class="centerCol">
      <div class="grid-content no-border">
        <!-- <span class='title'><span class="title-gradient">生产实时信息</span></span>
        <span class="angle1"></span>
        <span class="angle2"></span>
        <span class="angle3"></span>
        <span class="angle4"></span> -->
        <div class="item-container">
          <currentOutpu />
        </div>
      </div>
      <div class="grid-content">
        <span class='title'><span class="title-gradient">每小时产量</span></span>
        <span class="angle1"></span>
        <span class="angle2"></span>
        <span class="angle3"></span>
        <span class="angle4"></span>
        <div class="item-container">
          <MiniesTimeOutput ref="MiniesTimeOutputRef"/>
        </div>
      </div>

      <div class="grid-content">
        <span class='title'><span class="title-gradient">温度变化</span></span>
        <span class="angle1"></span>
        <span class="angle2"></span>
        <span class="angle3"></span>
        <span class="angle4"></span>
        <div class="item-container">
          <temperature ref="temperatureRef"/>
        </div>
      </div>
    </ElCol>
    <ElCol :span="7">
      <div class="grid-content">
        <span class='title'><span class="title-gradient">日累计产量</span></span>
        <span class="angle1"></span>
        <span class="angle2"></span>
        <span class="angle3"></span>
        <span class="angle4"></span>
        <div class="item-container">
          <EveryDayOutput ref="EveryDayOutputRef"/>
        </div>
      </div>
      <div class="grid-content">
        <span class='title'><span class="title-gradient">月累计产量</span></span>
        <span class="angle1"></span>
        <span class="angle2"></span>
        <span class="angle3"></span>
        <span class="angle4"></span>
        <div class="item-container">
          <EveryMonthOutput ref="EveryMonthOutputRef"/>
        </div>
      </div>
      <div class="grid-content">
        <span class='title'><span class="title-gradient">湿度变化</span></span>
        <span class="angle1"></span>
        <span class="angle2"></span>
        <span class="angle3"></span>
        <span class="angle4"></span>
        <div class="item-container">
          <Humidity ref="HumidityRef"/>
        </div>
      </div>

    </ElCol>
  </ElRow>
</template>
<script>
import {shallowRef, ref, onMounted, onBeforeUnmount, onBeforeMount} from 'vue'
import {useRouter} from 'vue-router'
import lodash from 'lodash'
import { ElRow, ElCol,ElMessage,ElMessageBox } from 'element-plus'
import currentDevice from './components/currentDevice.vue'
import temperature from './components/temperature.vue'
import Humidity from './components/Humidity.vue'
import currentOutpu from './components/currentOutpu.vue'
import MiniesTimeOutput from './components/MiniesTimeOutput.vue'
import EveryDayRunTime from './components/EveryDayRunTime.vue'
import EveryMonthRunTime from './components/EveryMonthRunTime.vue'
import EveryDayOutput from './components/EveryDayOutput.vue'
import EveryMonthOutput from './components/EveryMonthOutput.vue'
import {useVisualizingCustomerStore} from '/@/stores/visualizingCustomer'
import {getEquipList,getEquipEnvData} from '/@/api/visualizing/slave'
import { storeToRefs } from 'pinia';
export default {
  components: {
    ElRow,
    ElCol,
    currentDevice,
    temperature,
    Humidity,
    currentOutpu,
    MiniesTimeOutput,
    EveryDayRunTime,
    EveryMonthRunTime,
    EveryDayOutput,
    EveryMonthOutput
  },
  setup() {
    const store = useVisualizingCustomerStore()
    const {customer_id} = storeToRefs(store)
    let changeEquipTimer = null
    const EveryDayRunTimeRef = ref(null)
    const EveryMonthRunTimeRef = ref(null)
    const MiniesTimeOutputRef = ref(null)
    const temperatureRef = ref(null)
    const EveryDayOutputRef = ref(null)
    const EveryMonthOutputRef = ref(null)
    const HumidityRef = ref(null)
    const router = useRouter()
    //获取素有的设备列表
    const getEquipListData = async () => {
      const res = await getEquipList(customer_id.value)
      const dataList = lodash.get(res, 'data.list', [])
      const current_equip = dataList[0];
      store.updateEquip_num_list(dataList)
      store.updateCurrent_equip_num(current_equip)
      getEquipEnvDataRequest(current_equip.equipNum)
      //定时切换设备
      if(dataList.length > 1){
        changeEquipTimer = setInterval(() => {
        changeEquip()
      }, 15000);
      }
    }
    const getEquipEnvDataRequest = async (equip_num) => {
      const res = await getEquipEnvData(customer_id.value,equip_num)
      store.updateEnvDataList(lodash.get(res, 'data.list', []))
      setTimeout(() => {
        getEquipEnvDataRequest(equip_num)
      }, 1000*5);
    }
    //顺序定时切换不同的设备
    const changeEquip = () => {
      const equip_num_list = store.equip_num_list
      const current_equip_num = store.current_equip_num
      const index = equip_num_list.findIndex(item => item.equipNum === current_equip_num.equipNum)
      const next_index = index + 1
      if (next_index >= equip_num_list.length) {
        store.updateCurrent_equip_num(equip_num_list[0])
      } else {
        store.updateCurrent_equip_num(equip_num_list[next_index])
      }
    }
    const handleResize = lodash.debounce(() => {
        EveryDayRunTimeRef.value  && EveryDayRunTimeRef.value.resize()
        EveryMonthRunTimeRef.value && EveryMonthRunTimeRef.value.resize()
        MiniesTimeOutputRef.value && MiniesTimeOutputRef.value.resize()
        temperatureRef.value && temperatureRef.value.resize()
        EveryDayOutputRef.value && EveryDayOutputRef.value.resize()
        EveryMonthOutputRef.value && EveryMonthOutputRef.value.resize()
        HumidityRef.value && HumidityRef.value.resize()
      });
    onMounted(() => {
      if(customer_id.value){
        getEquipListData()
      } else {
        ElMessageBox.alert('客户id为空，请检查当前用户', '提示', {
          confirmButtonText: '确定',
          type: 'warning',
          callback: action => {
            router.push({name: 'login'})
          }
        })
      }
      
      window.addEventListener('resize', handleResize)
      //store.getCustomerInfo(customer_id)
    })
    onBeforeUnmount(() => {
      clearInterval(changeEquipTimer)
      window.removeEventListener('resize', handleResize)
    })
    return {
      EveryDayRunTimeRef,
      EveryMonthRunTimeRef,
      MiniesTimeOutputRef,
      temperatureRef,
      EveryDayOutputRef,
      EveryMonthOutputRef,
      HumidityRef,
      handleResize
    }
  }
}
</script>
<style lang="less" scoped>
@import url('/@/assets/less/visualizing.less');

.page6 {
  height: 100%;
  width: 100%;
  padding: 14px 20px 20px;
  background: #03044A;
  overflow: hidden;

  .el-col {
    height: 100%;
    display: grid;
    grid-template-rows: 34% 30% 30%;
    grid-gap: 20px;

    &.main {
      padding: 0 20px;
      grid-template-rows: auto 33.33%;
    }

    .grid-content {
      border: 1px solid #0D2451;
      position: relative;
      background: rgba(21,20,86, 0.6)
    }
    .no-border {
      border: none;
      position: relative;
      background: transparent;
    }

    .item-container {
      height: 100%;
      width: 100%;
    }
  }
}

.centerCol {
  grid-template-rows: 300px 200px !important;
}
</style>